<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>Progress Bar examples - Events</title>
<!-- css -->
<link rel="stylesheet" type="text/css" href="../../build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="../../build/base/base.css">


<link rel="stylesheet" type="text/css" href="../../build/progressbar/assets/skins/sam/progressbar.css">

<link rel="stylesheet" type="text/css" href="http://developer.yahoo.com/yui/assets/dpSyntaxHighlighter.css">

<!-- js -->
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
<script type="text/javascript" src="../../build/element/element-min.js"></script>

<script type="text/javascript" src="../../build/progressbar/progressbar-debug.js"></script>
<style type="text/css">
#ttb .yui-pb, #btt .yui-pb {
	width:20px;
	height:200px;
}

#ltr,#rtl, #ttb, #btt {
	margin:1em;
	border:thin solid silver;
	padding:1em;
}
.yui-pb-caption {
	visibility:visible;
}

</style>
</head>
<body class="yui-skin-sam">

	<div id="doc">
		<div id="hd">
			<h1>Progress Bar examples - Design Samples</h1>
			<p>An assortment of ProgressBars.</p>
		</div>
		<div id="bd">
			<div id="ltr"></div>
			<div id="rtl"></div>
			<div id="ttb"></div>
			<div id="btt"></div>
		</div>
	</div>
	<script  type="text/javascript">


	YAHOO.util.Event.onDOMReady( function () {
		var pbltr = new YAHOO.widget.ProgressBar({direction:'ltr',value:50}).render('ltr');
		var pbrtl = new YAHOO.widget.ProgressBar({direction:'rtl',value:50}).render('rtl');
		var pbttb = new YAHOO.widget.ProgressBar({direction:'ttb',value:50}).render('ttb');
		var pbbtt = new YAHOO.widget.ProgressBar({direction:'btt',value:50}).render('btt');
			
	});
</script>

</body>
</html>
